<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>CSS Test: Percentage Computed Height on Multicol Child (Definite Multicol Height)</title>
  <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact" />
  <link rel="help" href="http://www.w3.org/TR/css3-multicol/#the-multi-column-model" />
  <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property"/>
  <meta name="flags" content="" />
  <meta name="assert" content="Percentage heights with a multi-column element are relative to the computed height of the multicolumn box, and this works even when the multi-column element is paginated." />
  <link rel="match" href="multicol-height-002-print-ref.xht" />
  <style type="text/css"><![CDATA[
    html, body { height: 100%; }
    * { margin: 0; }
    div {
      border: double blue 12px;
      column-count:2;
      column-gap:0;
      column-fill: balance;
      height: 150%;
    }
    div > p {
      border-right: solid orange 12px;
      width: 0;
      margin: 0 auto;
      height: 200%;
    }
    blockquote {
      border: solid thick yellow;
    }
  ]]></style>
 </head>
 <body>
  <p>Test passes if even when printed:</p>
  <ul>
    <li>Two vertical orange stripes stretch exactly
    from the inner top edge to the inner bottom edge of the blue box below.</li>
    <li>There is a yellow stripe immediately below the blue box.</li>
  </ul>
  <div>
    <p></p>
  </div>
  <blockquote></blockquote>
 </body>
</html>
